﻿@{
    ViewBag.Title = "Progbar";
}

<h2>Progbar</h2>

<div id="progressbar"></div>

@using (@Html.BeginForm())
{
    
}

<script type="text/javascript">
    $(document).ready(function () {
        //Progressbar initialization
        $("#progressbar").progressbar({ value: 0 });
        //Button click event
        $("#operation").click(function (e) {
            //Disabling button
            $("#operation").attr('disabled', 'disabled');
            //Making sure that progress indicate 0
            $("#progressbar").progressbar('value', 0);
            //Perform POST for triggering long running operation
            $.post('<%: Url.Action("Operation") %>', function (data) {
                //Updating progress
                $("#progressbar").progressbar('value', data.progress);
                //Setting the timer
                window.progressIntervalId = window.setInterval(function () {
                    //Getting current operation progress
                    $.get('<%: Url.Action("OperationProgress") %>', function (data) {
                        //Updating progress
                        $("#progressbar").progressbar('value', data.progress);
                        //If operation is complete
                        if (data.progress == 100) {
                            //Clear timer
                            window.clearInterval(window.progressIntervalId);
                            //Enable button
                            $("#operation").attr('disabled', '');
                        }
                    });
                }, 500);
            });
        });
    });
</script>

